<template>
	<view class="bindgoole">
		<u-navbar title="绑定谷歌" bgColor="rgba(255,255,255,0.0)" :auto-back="true" :placeholder="true">
		</u-navbar>
		<view class="ability">
			<view class="qrbox"><image :src="qrcode" @longpress="gobaocun" mode="widthFix"></image></view>
			<!-- <view class="qrbtn">
				<u-button type="primary" @click="gobaocun"
					color="linear-gradient(90deg, rgb(254, 138, 3) 0%, rgb(250, 89, 0) 100%)" text="保存二维码"></u-button>
			</view> -->
			<view class="tisp">
				<view>提示</view>
				<view>1.长按二维码保存到手机</view>
				<view>2.打开微信小程序搜索得验证</view>
				<view>3.点击中间加号，扫码添加秘钥</view>
				<view>4.绑定成功后回到此页面进行确定！</view>
			</view>
		</view>
		<view class="end-btn">
			<u-button type="primary" text="我已绑定" @click="gobind" shape="circle" color="linear-gradient(90deg, rgb(254, 138, 3) 0%, rgb(250, 89, 0) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrcode: ''
			}
		},
		onLoad() {
			this.generateGoogleAuth()
		},
		methods: {
			gobind(){
				let app = this
				uni.showModal({
					title: '提示',
					content: '此操作不可逆，请确定您已经绑定成功！',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								mask: true
							})
							app.$Request({
								method: 'POST',
								url: '/api/member/user/bindGoogAuth',
								data: {},
								ismsg: true,
							}).then(res => {
								uni.hideLoading()
								if (res.code == 200) {
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1000)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			gobaocun() {
				let base64 = this.qrcode;
				uni.showLoading({
					mask:true
				})
				const bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(base64, function() {
					const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
					console.log('saveHeadImgFile', url)
					bitmap.save(url, {
						overwrite: true, // 是否覆盖
						// quality: 'quality'  // 图片清晰度
					}, (i) => {
						uni.saveImageToPhotosAlbum({
							filePath: url,
							success: function() {
								uni.hideLoading()
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								})
								bitmap.clear()
							}
						});
					}, (e) => {
						uni.hideLoading()
						uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						})
						bitmap.clear()
					});
				}, (e) => {
					uni.hideLoading()
					uni.showToast({
						title: '图片保存失败',
						icon: 'none'
					})
					bitmap.clear()
				});
			},
			generateGoogleAuth() {
				uni.showLoading({
					mask: true
				})
				this.$Request({
					method: 'POST',
					url: '/api/member/user/generateGoogleAuth',
					data: {},
					ismsg: false,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						console.log(res)
						this.qrcode = res.data.qrCode
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bindgoole {
		min-height: calc(100vh - 91rpx);
		background-image: url('../../../../static/goods/top-bg.png');
		background-size: 100% 561rpx;
		background-repeat: no-repeat;
		padding: 30rpx;
		.end-btn{
			margin-top: 30rpx;
		}
		.ability {
			width: 100%;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
			background-color: #ffffff;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 30rpx;
			.qrbox{
				width: 100%;
				text-align: center;
				image {
					width: 60%;
					height: 500rpx;
				}
			}
			.qrbtn {}

			.tisp {
				color: red;
			}
		}
	}
</style>